<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>增加</title>
<link type="text/css" rel="stylesheet" th:href="@{/css/page.css}" />
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}" ></script>
<!-- validation -->
<script type="text/javascript" th:src="@{/js/jquery/jquery.validate.js}" ></script>
<!-- layer -->
<link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}" />
<script type="text/javascript" th:src="@{/plug/layui/layui.js}"  charset="utf-8"></script>

<link type="text/css" rel="stylesheet" th:href="@{/js/layer/skin/layer.css}"/>
<script type="text/javascript" th:src="@{/js/layer/layer.js}" ></script>

<style type="text/css">

.need_span{
	color: red;
	display: none;
}
.need_0, .validation_span{
	color: red;
}
.need_1{
	color: #666666;
}
.input_0{
	width: 200px;
}
.form_table td{
	padding: 5px;
}
.text_ad_0{
	font-weight: bold;
	color: #444444;
	white-space: nowrap;
}
</style>

<script type="text/javascript"  th:inline="javascript">
	var c = [[${c}]];


$(function(){
	if (c){
		$("#content").val(c.content);
		$("#type").val(c.type);
		// $("#value").val(c.value);
		$("#harm").val(c.harm);
		$("#info").val(c.info);
	}
	// 图片上传预览功能
	$("#imageUpload").change(function () {
		var input = this;
		if (input.files && input.files[0]) {
			var reader = new FileReader();
			reader.onload = function (e) {
				// 清空之前的预览
				$("#imagePreview").empty();
				// 创建一个新的img标签并设置其src为读取到的图片数据
				$("<img>").attr("src", e.target.result).attr("style", "max-width: 100%; height: auto;").appendTo("#imagePreview");
			};
			reader.readAsDataURL(input.files[0]);
		}
	});
	//返回按钮
	$("#backBtu").click(function(){
		layer.confirm('确认返回吗？', {icon: 3, title:'提示'}, function(index){
		    parent.layer.closeAll();
		});
	});
	//返回按钮
	$("#saveBtu").click(function(){
		var param = new Object();
		param.content = $.trim($("#content").val());
		param.type = $.trim($("#type").val());
		//param.value = $.trim($("#value").val());
		param.harm = $.trim($("#harm").val());
		param.info = $.trim($("#info").val());
		console.log(param);
		var urlStr = "/admin/fenlei/doAdd";
		if (c){
			param.id = c.id;
			urlStr = "/admin/fenlei/doUpdate"
		}
		// 检查是否有上传的图片文件
		var imageFile = $("#imageUpload")[0].files[0];
		//如果没有上传的图片，且不是修改
		if(imageFile) {
			// 创建FormData对象
			var formData = new FormData();
			formData.append("file", imageFile); // 将文件添加到FormData中

			// 发送AJAX请求
			$.ajax({
				url: "/file/upload", // 后端接口地址
				type: "POST",
				data: formData, // 传递FormData对象
				contentType: false, // 不设置内容类型，让jQuery自动处理
				processData: false, // 不处理数据，直接发送FormData
				success: function (data) {
					if(data!="RRR"){}
					param.imageUrl = data;
				}
			});
		}else{
			layer.alert('请上传图片', {icon: 0});
			return false;
		}

		if (!param.content || 0===param.content.length ){
			console.log("内容不可为空");
			layer.alert('内容不可为空', {icon: 0});
			return false;
		}
		if (!param.type){
			layer.alert('类型不可为空', {icon: 0});
			return false;
		}
		if (!param.harm){
			layer.alert('危害不可为空', {icon: 0});
			return false;
		}
		if (!param.info|| 0==param.info.length ){
			layer.alert('简介不可为空', {icon: 0});
			return false;
		}

		layer.confirm('确认保存吗？', {icon: 3, title:'提示'}, function(index){
			$.ajax({
				type:"POST",
				async:true,  //默认true,异步
				data:param,
				url:urlStr,
				success:function(data){
					console.log(data);
					if(data === "SUCCESS"){
						layer.alert('保存成功！', {icon: 1});
						setTimeout(function() {
							parent.layer.closeAll(); // 2 秒后关闭
						}, 2000);
					}else if ("RRR" === data){
						layer.alert('内容重复！', {icon: 2});
					}else{
						layer.alert('保存失败！', {icon: 2});
					}
				},
				error: function (){
					layer.alert('请求失败, 请稍后重试! ', {icon: 2});
				}
			});


		});
	});
});

function closeSelf(){
    var i = layer.getFrameIndex();
	layer.close(i);
}



</script>
</head>
<body>
<div  style="margin-left:15px; height: 400px;">
<div class="first_div" style="border:none;">
	<div id="adListDiv" align="left" >
	<form>
		<table class="form_table" style="border-collapse: collapse;margin-left:20px;margin-top:10px;">

			<tr style="">
				<td align="right" >
					<span class="need_0">*</span>
					<span class="text_ad_0">内容：</span>
				</td>
				<td>
					<input id="content" type="text" name="content" class="input_0" value="" />
					<span class="validation_span"></span>
				</td>
			</tr>

			<tr>
				<td style="" align="right">
					<span class="need_0">*</span>
					<span class="text_ad_0">栖息环境分类：</span>
				</td>
				<td >
					<select id="type" name="type" class="input_0">
						<option value="1">浮游生物</option>
						<option value="2">海洋底栖生物</option>
						<option value="3">海洋鱼类和其他水生生物</option>
					</select>
				</td>
			</tr>

			<!-- TODO: 这边添加一个图片上传框-->
			<tr style="">
				<td align="right">
					<span class="need_0">*</span>
					<span class="text_ad_0">图片上传：</span>
				</td>
				<td>
					<input id="imageUpload" type="file" name="image" accept="image/*" />
					<div id="imagePreview" style="margin-top: 10px; max-width: 200px;">
						<!-- 图片预览将显示在这里 -->
					</div>
					<span class="validation_span"></span>
				</td>
			</tr>
			<tr style="">
				<td align="right" >
					<span class="need_0">*</span>
					<span class="text_ad_0">生物学类型：</span>
				</td>
				<td>
					<select id="harm" name="harm" class="input_0">
						<option value="1">植物</option>
						<option value="2">动物</option>
						<option value="3">真菌</option>
					</select>
					<span class="validation_span"></span>
				</td>
			</tr>
			<tr style="">
				<td align="right" >
					<span class="need_0">*</span>
					<span class="text_ad_0">简介：</span>
				</td>
				<td>
					<textarea id="info" name="info"  rows="3" cols="25"></textarea>
					<span class="validation_span"></span>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="left" >
					<div style="margin-top:10px;margin-bottom:20px;margin-left:120px;">
						<input type="button" class="layui-btn" lay-submit="" lay-filter="add" id="saveBtu" name="saveBtu" value="保存" style="" />
						<input type="button" class="layui-btn" lay-submit="" lay-filter="add" id="backBtu" name="backBtu" value="返回" style="margin-left:20px;" />
					</div>
				</td>
			</tr>
		</table>
	</form>
		</div>
	</div>
</div>
</body>
</html>
